<template>
      <div id="swiper">
            <div class="imglist" @click="newsShow(imgData.id)">
                  <img :src="imgData.topic" alt="" class="bgImg">
                  <div class="infobox" >
                        <div class="txt">
                              <div class="title">
                                    {{ imgData.title }}
                              </div>
                              <div class="content">
                                    {{ imgData.abstract }} 
                              </div>
                        </div>
                        <!-- <div class="point">
                              <div class="item" v-for="(item, index) in zhineng" :key="index"></div>
                        </div> -->
                  </div>
            </div>
            <div class="infolist" >
                  <div class="item" :class="{'active': act == index}" 
                  @click="newsShow(item.id)"
                  v-for="(item, index) in listData" :key="index" @mouseover="getSwiper(item, index)">
                        <div class="left" v-if="index <= 3">
                              <div class="title">
                                    {{ item.title }}
                              </div>
                              <div class="content">
                                    {{ item.abstract }}
                              </div>
                        </div>
                        <div class="right" v-if="index <= 3">
                              {{ item.addtime }}
                        </div>
                  </div>

            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                       // imgData:{},
                        swiperData: {},
                        act: "0",
                  }
            },
            props: {
                  zhong: Array
            },
            computed: {
                  listData() {
                        return this.zhong 
                  },
                  imgData() {
                        return this.listData[this.act]
                  }
            },
            watch: {
                  first() {
                        this.getImgData()
                        this.imgData = this.first
                  }
            },
            methods: {
                  // 获取swiper数据
                  getSwiper( item , index) {
                        // this.imgData = item
                        this.act = index
                  },
                  newsShow( id ) {
                        this.$router.push(`/newsshow/${id}`)
                  },
                 
            },
            
      }
</script>

<style lang="scss" scoped>

#swiper {
      width: 1080px;
      margin: 30px auto;
      display: flex;

      .imglist {
            width: 510px;
            height: 350px;
            position: relative;
            left: 0;
            top: 0;
            overflow: hidden;
            background-color: #000;
            .bgImg {
                  width: 510px;
                  height: 350px;
                  display: block;
            }
            .infobox {
                  width: 510px;
                  height: 60px;
                  overflow: hidden;
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  background-color: rgba(255,255,255,.5);
                  .txt {
                        width: 350px;
                        height: 60px;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        padding: 0 10px;
                        text-overflow: ellipsis;
                        .title {
                              font-size: 20px;
                              width: 100%;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 1;
                              overflow: hidden;
                              text-overflow: ellipsis;
                        }
                        .content {
                              font-size: 12px;
                              width: 320px;
                              color: #000;
                              width: 100%;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 2;
                              overflow: hidden;
                              text-overflow: ellipsis;
                        }
                  }
            }
      }
      .infolist {
            widows: 570px;
            height: 350px;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #000;
            .item {
                  flex:1;
                  width: 570px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-top: 1px solid #000;
                  padding-left: 20px;
                  padding-right: 20px;
                  overflow: hidden;
                  cursor: pointer;
                  .left {
                        width: 430px;
                        .title {
                              font-size: 24px;
                              width: 100%;
                              font-weight: bold;
                              display: -webkit-box;
                              text-overflow: ellipsis;
                              -webkit-box-orient: vertical;
                              overflow: hidden;
                              -webkit-line-clamp: 1;
                             
                        }
                        .content {
                              font-size: 14px;
                              width: 430px;
                              color: #8D8D8D;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              overflow: hidden;
                              -webkit-line-clamp: 2;
                              text-overflow: ellipsis;
                        }
                  }
                  .right {
                        font-size: 10px;
                        color: #8E8E8E;
                  }
            }
            .active {
                  color:#1c9ff2;
                  
            }
      }
}
</style>